<template>
	<view class="detail">
		<view class="msg">
			<image :src="detail.imgUrl" mode="aspectFit" class="cover-img"></image>
			<text class="title">{{detail.title}}</text>
			<view class="tips">
				<image class="icon" src="../../static/time2.png" mode="aspectFit"></image>
				<text>开课时间：{{new Date(detail.createTime).getFullYear()}}-{{new Date(detail.createTime).getMonth() + 1}}</text>
			</view>
			<view class="tips">
				<image class="icon"  src="../../static/clock.png"></image>
				购买后 365 天内有效
			</view>
			<!-- <text class="price">￥{{ detail.realCost }}</text> -->
		</view>
		<view class="service">
			<text class="title">服务</text>
			<text class="content">全国名师授课，在线直播互动</text>
		</view>
		<view class="bottom">
			<uni-goods-nav :fill="true" :options="options" :button-group="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
		</view> 
		
	</view>
</template>

<script>
	import { getCourseDetail, addOrder } from '@/api'
	
	import uniGoodsNav from '@/components/uni-goods-nav/uni-goods-nav.vue'
	export default {
		components: {
			uniGoodsNav
		},
		data() {
			return {
				detail: {},
				id: '',
				// options: [{
				//             icon: 'cart',
				//             text: '购课单',
				//         }],
				//         buttonGroup: [
				// 		// {
				//   //         text: '单独购买',
				//   //         backgroundColor: '#F2ABA6',
				//   //         color: '#fff',
				// 		//   loading: this.loading
				//   //       },
				//         {
				//           text: '发起拼单',
				//           backgroundColor: '#E02E24',
				//           color: '#fff'
				//         }
				// 	],
					loading: false,
					price: 1,
			}
		},
		methods: {
			
			getCourseDetail() {
				getCourseDetail(this.id)
					.then(res => {
						console.log(this.id);
						
					})
			},
			
			getCourseDetail() {
				uni.showLoading({
					title: '加载中...'
				})
				getCourseDetail(this.id)
					.then(res => {
						console.log(this.id);
						if(res.status === 200) {
							this.detail = res.oData;
						}
					})
					.finally(() => {
						uni.hideLoading();
					})
			},
			// TODO 设置 单独价  拼单价
			onClick (e) {
				// uni.showToast({
				//   title: `点击${e.content.text}`,
				//   icon: 'none'
				// })
				if(e.content.icon === 'cart') {
					uni.navigateTo({
						url:'../myCourse/myCourse'
					})
				}
			  },
		  buttonClick (e) {
			// if(e.index === 0) {
			// 	// 单独购买 e.content.xxx
			// 	this.weixinPay();
			// } else {
			// 	// 发起拼单
			// }
			uni.showLoading({
				title: '拼团中...'
			})
			addOrder({
				userId: uni.getStorageSync('openid'),
				courseId: this.id
			}).then(res => {
				uni.hideLoading();
				if(res.status === 200) {
					uni.showToast({
						title: '拼团成功'
					});
					// uni.redirectTo({
					// 	url:'../orderDetail/orderDetail?id=' + 
					// })
					// setTimeout(() => {
					// 	uni.switchTab({
					// 		url: '../group/group'
					// 	})
					// }, 2000);
					uni.showModal({
						title: '成功拼团时账号生效',
						mask: true,
						content: `
							账号：${res.oData.loginName}
							密码：${res.oData.pwd}
						`,
						showCancel: false,
						// success() {
						// 	uni.switchTab({
						// 		url: '../group/group'
						// 	})
						// }
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: res.sData
					});
				}
			})
		  },
		  
		  // 支付相关
		  loginMpWeixin() {
		  	return new Promise((resolve, reject) => {
		  		uni.login({
		  			provider: 'weixin',
		  			success(res) {
		  				uni.request({
		  					url: 'https://97fca9f2-41f6-449f-a35e-3f135d4c3875.bspapp.com/http/user-center',
		  					method: 'POST',
		  					data: {
		  						action: 'loginByWeixin',
		  						params: {
		  							code: res.code,
		  							platform: 'mp-weixin'
		  						}
		  					},
		  					success(res) {
		  						if (res.data.code !== 0) {
									uni.hideLoading()
		  							reject(new Error('获取openid失败：', res.result.msg))
		  							return
		  						}
		  						uni.setStorageSync('openid', res.data.openid)
		  						resolve(res.data.openid)
		  					},
		  					fail(err) {
								uni.hideLoading()
		  						reject(new Error('获取openid失败：' + err))
		  					}
		  				})
		  			},
		  			fail(err) {
		  				reject(err)
		  			}
		  		})
		  	})
		  },
		  async weixinPay() {
			  uni.showLoading({
			  	title: '发起支付'
			  })
		  	let openid = uni.getStorageSync('openid')
		  	console.log("发起支付");
		  	this.loading = true;
		  	if (!openid) {
		  		try {
		  			openid = await this.loginMpWeixin()
		  		} catch (e) {
					uni.hideLoading()
		  			console.error(e)
		  		}
		  
		  		if (!openid) {
		  			uni.showModal({
		  				content: '获取openid失败',
		  				showCancel: false
		  			})
					uni.hideLoading()
		  			this.loading = false
		  			return
		  		}
		  	}
		  	this.openid = openid
		  	// let orderInfo = await this.getOrderInfo('wxpay')
		  	let orderInfo = {}
		  	if (!orderInfo) {
		  		uni.showModal({
		  			content: '获取支付信息失败',
		  			showCancel: false
		  		})
					uni.hideLoading()
		  		return
		  	}
		  	uni.requestPayment({
		  		...orderInfo,
		  		success: (res) => {
		  			uni.showToast({
		  				title: "支付成功!"
		  			})
					uni.hideLoading()
		  		},
		  		fail: (res) => {
		  			uni.showModal({
		  				content: "支付失败,原因为: " + res
		  					.errMsg,
		  				showCancel: false
		  			})
					uni.hideLoading()
		  		},
		  		complete: () => {
		  			this.loading = false;
					uni.hideLoading()
		  		}
		  	})
		  },
		  async requestPayment(e, index) {
		  	this.providerList[index].loading = true;
		  	const provider = e.id
		  	let orderInfo = await this.getOrderInfo(provider);
		  	if (!orderInfo) {
		  		uni.showModal({
		  			content: '获取支付信息失败',
		  			showCancel: false
		  		})
		  		return
		  	}
		  	console.log('--------orderInfo--------')
		  	console.log(orderInfo);
		  	uni.requestPayment({
		  		provider,
		  		orderInfo: orderInfo,
		  		success: (e) => {
		  			console.log("success", e);
		  			uni.showToast({
		  				title: "支付成功!"
		  			})
		  		},
		  		fail: (e) => {
		  			console.log("fail", e);
		  			uni.showModal({
		  				content: "支付失败,原因为: " + e.errMsg,
		  				showCancel: false
		  			})
		  		},
		  		complete: () => {
		  			this.providerList[index].loading = false;
		  		}
		  	})
		  },
		  getOrderInfo(provider) {
		  	return new Promise((resolve, reject) => {
		  		if (!this.price) {
		  			reject(new Error('请输入金额'))
		  		}
		  		uni.request({
		  			method: 'POST',
		  			url: 'https://97fca9f2-41f6-449f-a35e-3f135d4c3875.bspapp.com/http/pay',
		  			data: {
		  				provider,
		  				openid: this.openid,
		  				totalFee: Number(this.price) * 100, // 转为以分为单位
		  				// #ifdef APP-PLUS
		  				platform: 'app-plus',
		  				// #endif
		  				// #ifdef MP-WEIXIN
		  				platform: 'mp-weixin',
		  				// #endif
		  			},
		  			success(res) {
		  				if (res.data.code === 0) {
		  					resolve(res.data.orderInfo)
		  				} else {
		  					reject(new Error('获取支付信息失败' + res.data.msg))
		  				}
		  			},
		  			fail(err) {
		  				reject(new Error('请求支付接口失败' + err))
		  			}
		  		})
		  	})
		  }
		},
		mounted(ops) {
			console.log(ops)
		},
		onLoad(ops) {
			console.log(+ops.id)
			this.id = +ops.id;
			this.getCourseDetail();
		}
	}
</script>

<style>
	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}
	
	.service {
		display: flex;
		height: 50px;
		line-height: 50px;
		padding: 0 20px;
		margin-bottom: 20px;
		background-color: #fff;
		border-top: 1px solid #e0e0e0;
	}
	
	.service .title {
		font-size: 12px;
		color:#3B4144;
	}
	
	.service .content {
		margin-left: 20px;
		font-size: 14px;
	}
	.msg {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		padding-bottom: 20px;
	}
	
	.msg > text  {
		padding-left: 30px;
		margin-top: 10px;
	}
	
	.cover-img {
		width: 100%;
		height: 200px;
	}
	
	.title {
		font-size: 18px;
	}
	
	.tips {
		display: flex;
		color: #3B4144;
		margin-top: 5px;
		font-size: 12px;
		height: 20px;
		line-height: 20px;
		padding-left: 30px;
	}
	
	.tips .icon {
		width: 20px;
		height: 20px;
		margin-right: 5px;
	}
	
	.price {
		color: #f81638;
	}
</style>
